<template>
  <div :style="{ ...coreStyle.marginSame(8) }">
    <a-card>
      <a-form ref="actProcessFormQueryRef" :model="actProcessFormQueryModel" labelAlign="left" layout="vertical" :style="{ ...coreStyle.marginBottom(10) }">
        <a-row :gutter="16" v-show="!actProcessFormQueryVisible">
          <a-col :span="8">
            <a-form-item :style="{ ...coreStyle.marginBottom(-8) }">
              <a-input-search v-model:value="actProcessFormQueryModel.keySearchVo" placeholder="关键字搜索" :disabled="actProcessFormQuerySubmitting" @search="actProcessFormQuerySearch" />
            </a-form-item>
          </a-col>
          <a-col :span="16">
            <a-button type="link" :style="{ ...coreStyle.floatRight }" @click="actProcessFormQueryUpDown">
              展开
              <CoreIcon icon="akar-icons:chevron-down" :size="14" />
            </a-button>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-show="actProcessFormQueryVisible">
          <a-col :span="8">
            <a-form-item>
              <a-input-search v-model:value="actProcessFormQueryModel.keySearchVo" placeholder="关键字搜索" :disabled="actProcessFormQuerySubmitting" @search="actProcessFormQuerySearch" />
            </a-form-item>
          </a-col>
          <a-col :span="16">
          </a-col>
          <a-col :span="8">
            <a-form-item label="流程标识">
              <a-input v-model:value="actProcessFormQueryModel.processKeyAndLike" placeholder="输入流程标识" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="流程名称">
              <a-input v-model:value="actProcessFormQueryModel.processNameAndLike" placeholder="输入流程名称" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="流程类型">
              <a-input v-model:value="actProcessFormQueryModel.processTypeAndLike" placeholder="输入流程类型" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="默认流程版本">
              <a-input-number v-model:value="actProcessFormQueryModel.defaultProcessVersions" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="描述">
              <a-input v-model:value="actProcessFormQueryModel.descriptionAndLike" placeholder="输入描述" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="排序权重">
              <a-input-number v-model:value="actProcessFormQueryModel.weightOrder" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="版本号">
              <a-input-number v-model:value="actProcessFormQueryModel.versions" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-space :style="{ ...coreStyle.floatRight }">
              <a-button @click="actProcessFormQueryReset">
                <CoreIcon icon="ant-design:clear-outlined" :size="14" />
                重置
              </a-button>
              <a-button type="primary" ghost :loading="actProcessFormQuerySubmitting" @click="actProcessFormQuerySearch">
                <CoreIcon icon="ant-design:search-outlined" :size="14" />
                查询
              </a-button>
              <a-button type="link" @click="actProcessFormQueryUpDown">
                收起
                <CoreIcon icon="akar-icons:chevron-up" :size="14" />
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <a-space>
        <a-button type="primary" ghost @click="actProcessAdd">
          <CoreIcon icon="carbon:add-alt" :size="14" />
          新增
        </a-button>
        <a-button type="dashed" @click="actProcessUpdate" v-if="actProcessListSelectLength === 1">
          <CoreIcon icon="ri:brush-line" :size="14" />
          修改
        </a-button>
        <a-popconfirm title="确认删除？" placement="bottom" @confirm="actProcessDelete" v-if="actProcessListSelectLength > 0">
          <a-button type="dashed" danger>
            <CoreIcon icon="jam:delete" :size="14" />
            删除
          </a-button>
        </a-popconfirm>
        <a-button @click="actProcessDetailInfo" v-if="actProcessListSelectLength === 1">
          <CoreIcon icon="heroicons-outline:light-bulb" :size="14" />
          详情
        </a-button>
      </a-space>
      <a-space :style="{ ...coreStyle.floatRight }">
        <a-button type="link" shape="circle" @click="actProcessListGetDataSet">
          <CoreIcon icon="ci:refresh" :size="22" />
        </a-button>
      </a-space>
      <a-table
        rowKey="id"
        :columns="actProcessListColumns"
        :data-source="actProcessListDataSet"
        :loading="actProcessListLoading"
        :pagination="false"
        bordered
        :customRow="actProcessListCustomRow"
        :row-selection="{ fixed: true, selectedRowKeys: actProcessListSelectedRowKeys, onChange: actProcessListRowOnChange }"
        :scroll="{ x: '100%', y: 550 }"
        :style="{ ...coreStyle.marginTop(10) }"
      >
      </a-table>
      <a-pagination
        v-model:current="actProcessListDataPage"
        v-model:pageSize="actProcessListDataRows"
        :total="actProcessListDataCount"
        show-size-changer
        show-quick-jumper
        :page-size-options="[ ...coreStyle.antdPaginationPageSizeOptions ]"
        :show-total="(total, range) => coreStyle.antdPaginationShowTotal(total, range)"
        :style="{ ...coreStyle.marginTop(10), ...coreStyle.textAlignCenter }"
        @change="actProcessListPaginationChange"
        @showSizeChange="actProcessListPaginationShowSizeChange"
        v-if="actProcessListPaginationVisible"
      >
      </a-pagination>
      <p :style="{ ...coreStyle.marginTop(14), ...coreStyle.marginBottom(6), ...coreStyle.textAlignCenter }" v-if="!actProcessListPaginationVisible">
        {{ coreStyle.antdPaginationShowTotal(actProcessListDataCount) }}
      </p>
    </a-card>
    <a-drawer
      v-model:visible="actProcessEditDrawerVisible"
      title="编辑流程信息"
      placement="right"
      :closable="false"
      :width="'40%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
      @close="actProcessEditDrawerOnClose"
    >
      <a-form ref="actProcessFormRef" :model="actProcessFormModel" :rules="actProcessFormRules" labelAlign="left" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="流程标识" name="processKey">
              <a-input v-model:value="actProcessFormModel.processKey" placeholder="输入流程标识" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="流程名称" name="processName">
              <a-input v-model:value="actProcessFormModel.processName" placeholder="输入流程名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="流程类型" name="processType">
              <a-input v-model:value="actProcessFormModel.processType" placeholder="输入流程类型" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="默认流程版本" name="defaultProcessVersions">
              <a-input-number v-model:value="actProcessFormModel.defaultProcessVersions" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="描述" name="description">
              <a-input v-model:value="actProcessFormModel.description" placeholder="输入描述" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="排序权重" name="weightOrder">
              <a-input-number v-model:value="actProcessFormModel.weightOrder" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="版本号" name="versions">
              <a-input-number v-model:value="actProcessFormModel.versions" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div :style="{ ...coreStyle.antdDrawerFooter }">
        <a-space>
          <a-button @click="actProcessFormReset">
            <CoreIcon icon="ant-design:clear-outlined" :size="14" />
            重置
          </a-button>
          <a-button type="primary" ghost :loading="actProcessFormSaveSubmitting" @click="actProcessFormNextAdd">
            <CoreIcon icon="tabler:player-track-next" :size="14" />
            继续录入
          </a-button>
          <a-button type="primary" ghost :loading="actProcessFormSaveSubmitting" @click="actProcessFormSave">
            <CoreIcon icon="ant-design:save-outlined" :size="14" />
            保存
          </a-button>
        </a-space>
      </div>
    </a-drawer>
    <a-drawer
      v-model:visible="actProcessDetailDrawerVisible"
      title="流程详细信息"
      placement="right"
      :closable="false"
      :width="'40%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
    >
      <a-space direction="vertical" :size="20" :style="{ ...coreStyle.width('100%') }">
        <a-descriptions title="基础信息" :column="2" bordered>
          <a-descriptions-item label="流程标识" :span="1">{{ actProcessDetailModel.processKey }}</a-descriptions-item>
          <a-descriptions-item label="流程名称" :span="1">{{ actProcessDetailModel.processName }}</a-descriptions-item>
          <a-descriptions-item label="流程类型" :span="1">{{ actProcessDetailModel.processType }}</a-descriptions-item>
          <a-descriptions-item label="默认流程版本" :span="1">{{ actProcessDetailModel.defaultProcessVersions }}</a-descriptions-item>
          <a-descriptions-item label="描述" :span="1">{{ actProcessDetailModel.description }}</a-descriptions-item>
          <a-descriptions-item label="排序权重" :span="1">{{ actProcessDetailModel.weightOrder }}</a-descriptions-item>
          <a-descriptions-item label="版本号" :span="1">{{ actProcessDetailModel.versions }}</a-descriptions-item>
        </a-descriptions>
      </a-space>
      <div :style="{ ...coreStyle.antdDrawerFooter }">
        <a-space>
          <a-button type="dashed" @click="actProcessDetailUpdate">
            <CoreIcon icon="ri:brush-line" :size="14" />
            修改
          </a-button>
        </a-space>
      </div>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { mapStores } from 'pinia'
import { useCoreToolStore } from '/@/store/modules/cn/core/tool/coreToolStore'
import type { Res } from '/@/tool/Res'
import type { Param } from '/@/tool/Param'

import { useActProcessStore } from '/@/store/modules/cn/core/act/actProcessStore'

import type { ActProcess } from '/@/model/cn/core/act/eo/ActProcess'
import { toActProcess } from '/@/model/cn/core/act/eo/ActProcess'

import type { ActProcessQO } from '/@/model/cn/core/act/qo/ActProcessQO'
import { toActProcessQO } from '/@/model/cn/core/act/qo/ActProcessQO'

import type { ActProcessVO } from '/@/model/cn/core/act/vo/ActProcessVO'
import { toActProcessVO } from '/@/model/cn/core/act/vo/ActProcessVO'

@Options({
  name: 'ActProcess',
  components: {
  },
  computed: {
    ...mapStores(useCoreToolStore, useActProcessStore),
  },
})
export default class ActProcess extends Vue {

  actProcessListDataSet: Array<ActProcessVO> = []

  actProcessListColumns: Array<object> = [
    {
      title: '流程标识',
      dataIndex: 'processKey',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '流程名称',
      dataIndex: 'processName',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '流程类型',
      dataIndex: 'processType',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '默认流程版本',
      dataIndex: 'defaultProcessVersions',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '描述',
      dataIndex: 'description',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '排序权重',
      dataIndex: 'weightOrder',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '版本号',
      dataIndex: 'versions',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
  ]

  actProcessListLoading: boolean = false

  actProcessListSelectedRowKeys: string[] = []

  actProcessListSelectData: Array<ActProcessVO> = []

  actProcessListSelectLength: number = 0

  actProcessListSelectCurrentRowIndex: number = -1

  actProcessListSelectCurrentRowData: ActProcessVO = toActProcessVO()

  actProcessListPaginationVisible: boolean = true

  actProcessListDataPage: number = 1

  actProcessListDataRows: number = 10

  actProcessListDataCount: number = 0

  actProcessListRowOnChange(selectedRowKeys, selectedRows) {
    this.actProcessListSelectedRowKeys = [ ...selectedRowKeys ]
    this.actProcessListSelectData = [ ...selectedRows ]
    this.actProcessListSelectLength = selectedRows.length
  }

  actProcessListCustomRow(record, index) {
    return {
      'class': index === this.actProcessListSelectCurrentRowIndex ? 'ant-table-row-selected' : '',
      onClick: (event) => {
        this.actProcessListSelectCurrentRowIndex = index
        this.actProcessListSelectCurrentRowData = { ...record }
        let selectedRowKeys = [ ...this.actProcessListSelectedRowKeys ]
        let selectedRows = [ ...this.actProcessListSelectData ]
        if (selectedRowKeys.includes(record.id)) {
          this.actProcessListRowOnChange([ ...selectedRowKeys.filter(eo => { return eo !== record.id }) ], [ ...selectedRows.filter(eo => { return eo.id !== record.id }) ])
        } else {
          selectedRowKeys.push(record.id)
          selectedRows.push(record)
          this.actProcessListRowOnChange([ ...new Set(selectedRowKeys) ], [ ...new Set(selectedRows) ])
        }
      },
      onDblclick: (event) => {
        this.actProcessStore.pkVo(this.$toParam<ActProcessQO>({ id: this.actProcessListSelectCurrentRowData.id } as ActProcessQO)).then((res: Res<ActProcessVO>) => {
          if (res.succ) {
            this.actProcessDetailModel = { ...res.data[0] }
            this.actProcessDetailDrawerVisible = true
          } else {
            this.$message.error(res.msg, 6)
          }
        })
      },
    }
  }

  actProcessListGetDataSet() {
    this.actProcessListLoading = true
    this.actProcessListRowOnChange([], [])
    this.actProcessListSelectCurrentRowIndex = -1
    this.actProcessListSelectCurrentRowData = toActProcessVO()
    this.actProcessStore.pagingVo(this.$toParam<ActProcessQO>([], this.actProcessListDataPage, this.actProcessListDataRows)).then((res: Res<ActProcessVO>) => {
      if (res.succ) {
        this.actProcessListPaginationVisible = true
        this.actProcessListDataSet = [ ...res.data ]
        this.actProcessListDataCount = res.count
        setTimeout(() => { this.actProcessListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.actProcessListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.actProcessListLoading = false }, 500)
    })
  }

  actProcessListPaginationChange() {
    this.actProcessListGetDataSet()
  }

  actProcessListPaginationShowSizeChange() {
    this.actProcessListGetDataSet()
  }

  actProcessFormQueryVisible: boolean = false

  actProcessFormQuerySubmitting: boolean = false

  actProcessFormQueryModel: ActProcessQO = toActProcessQO()

  actProcessFormQueryUpDown() {
    this.actProcessFormQueryVisible = !this.actProcessFormQueryVisible
  }

  actProcessFormQueryReset() {
    if (this.$refs.actProcessFormQueryRef) {
      this.$refs.actProcessFormQueryRef.resetFields()
      this.actProcessFormQueryModel = toActProcessQO()
    }
  }

  actProcessFormQuerySearch() {
    this.actProcessFormQuerySubmitting = true
    this.actProcessListLoading = true
    this.actProcessListRowOnChange([], [])
    this.actProcessListSelectCurrentRowIndex = -1
    this.actProcessListSelectCurrentRowData = toActProcessVO()
    this.actProcessStore.queryVo(this.$toParam<ActProcessQO>(this.$toSearch({ ...this.actProcessFormQueryModel }))).then((res: Res<ActProcessVO>) => {
      if (res.succ) {
        this.actProcessListPaginationVisible = false
        this.actProcessListDataSet = [ ...res.data ]
        this.actProcessListDataCount = res.count
        setTimeout(() => { this.actProcessFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.actProcessListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.actProcessFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.actProcessListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.actProcessFormQuerySubmitting = false }, 5000)
      setTimeout(() => { this.actProcessListLoading = false }, 500)
    })
  }

  actProcessEditDrawerVisible: boolean = false

  actProcessFormSaveSubmitting: boolean = false

  actProcessFormSaveContinue: boolean = false

  actProcessFormModel: ActProcess = toActProcess()

  actProcessFormRules: object = {
    // processKey: [
    //   { type: 'string', required: true, message: '流程标识不能为空！', trigger: ['change', 'blur'] },
    // ],
    // processName: [
    //   { type: 'string', required: true, message: '流程名称不能为空！', trigger: ['change', 'blur'] },
    // ],
    // processType: [
    //   { type: 'string', required: true, message: '流程类型不能为空！', trigger: ['change', 'blur'] },
    // ],
    // defaultProcessVersions: [
    //   { type: 'number', required: true, message: '默认流程版本不能为空！', trigger: ['change', 'blur'] },
    // ],
    // description: [
    //   { type: 'string', required: true, message: '描述不能为空！', trigger: ['change', 'blur'] },
    // ],
    // weightOrder: [
    //   { type: 'number', required: true, message: '排序权重不能为空！', trigger: ['change', 'blur'] },
    // ],
    // versions: [
    //   { type: 'number', required: true, message: '版本号不能为空！', trigger: ['change', 'blur'] },
    // ],
  }

  actProcessFormReset() {
    if (this.$refs.actProcessFormRef) {
      this.$refs.actProcessFormRef.resetFields()
      this.actProcessFormModel = toActProcess()
    }
  }

  actProcessFormSubmit() {
    this.actProcessFormSaveSubmitting = true
    this.$refs.actProcessFormRef.validate().then(() => {
      if (this.actProcessFormModel.id) {
        this.actProcessStore.update(this.$toParam<ActProcess>(this.actProcessFormModel)).then((res: Res<ActProcess>) => {
          if (res.succ) {
            this.$message.success(res.msg, 3)
            this.actProcessFormReset()
            this.actProcessFormSaveSubmitting = false
            if (!this.actProcessFormSaveContinue) {
              this.actProcessEditDrawerVisible = false
              this.actProcessListGetDataSet()
            }
          } else {
            this.$message.error(res.msg, 6)
            setTimeout(() => { this.actProcessFormSaveSubmitting = false }, 3000)
          }
        }).catch(err => {
          setTimeout(() => { this.actProcessFormSaveSubmitting = false }, 3000)
        })
      } else {
        this.actProcessStore.save(this.$toParam<ActProcess>(this.actProcessFormModel)).then((res: Res<ActProcess>) => {
          if (res.succ) {
            this.$message.success(res.msg, 3)
            this.actProcessFormReset()
            this.actProcessFormSaveSubmitting = false
            if (!this.actProcessFormSaveContinue) {
              this.actProcessEditDrawerVisible = false
              this.actProcessListGetDataSet()
            }
          } else {
            this.$message.error(res.msg, 6)
            setTimeout(() => { this.actProcessFormSaveSubmitting = false }, 3000)
          }
        }).catch(err => {
          setTimeout(() => { this.actProcessFormSaveSubmitting = false }, 3000)
        })
      }
    }).catch(() => {
      setTimeout(() => { this.actProcessFormSaveSubmitting = false }, 3000)
    })
  }

  actProcessFormSave() {
    this.actProcessFormSaveContinue = false
    this.actProcessFormSubmit()
  }

  actProcessFormNextAdd() {
    this.actProcessFormSaveContinue = true
    this.actProcessFormSubmit()
  }

  actProcessAdd() {
    if (this.actProcessFormModel.id) {
      this.actProcessFormReset()
    }
    this.actProcessEditDrawerVisible = true
  }

  actProcessUpdate() {
    this.actProcessStore.pk(this.$toParam<ActProcessQO>({ id: this.actProcessListSelectData[0].id } as ActProcessQO)).then((res: Res<ActProcess>) => {
      if (res.succ) {
        this.actProcessFormReset()
        this.actProcessFormModel = { ...res.data[0] }
        this.actProcessEditDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  actProcessEditDrawerOnClose() {
    if (this.actProcessFormSaveContinue) {
      this.actProcessFormSaveContinue = false
      this.actProcessListGetDataSet()
    }
  }

  actProcessDelete() {
    let param: Array<ActProcess> = []
    this.actProcessListSelectData.forEach((eo: ActProcessVO) => {
      param.push({ id: eo.id } as ActProcess)
    })
    this.actProcessStore.removeBatch(this.$toParam<ActProcess>(param)).then((res: Res<ActProcess>) => {
      if (res.succ) {
        this.$message.success(res.msg, 3)
        this.actProcessListGetDataSet()
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  actProcessDetailDrawerVisible: boolean = false

  actProcessDetailModel: ActProcessVO = toActProcessVO()

  actProcessDetailInfo() {
    this.actProcessStore.pkVo(this.$toParam<ActProcessQO>({ id: this.actProcessListSelectData[0].id } as ActProcessQO)).then((res: Res<ActProcessVO>) => {
      if (res.succ) {
        this.actProcessDetailModel = { ...res.data[0] }
        this.actProcessDetailDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  actProcessDetailUpdate() {
    this.actProcessStore.pk(this.$toParam<ActProcessQO>({ id: this.actProcessDetailModel.id } as ActProcessQO)).then((res: Res<ActProcess>) => {
      if (res.succ) {
        this.actProcessFormReset()
        this.actProcessFormModel = { ...res.data[0] }
        this.actProcessDetailDrawerVisible = false
        this.actProcessEditDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  mounted() {
    this.actProcessListGetDataSet()
  }

}
</script>

<style scoped lang="less">

</style>
